<link rel="stylesheet" th:href="@{admin/plugins/ckeditor4/skins/office2013/editor_gecko.css}" type="text/css" />
<script th:src="@{admin/plugins/uploader/js/webuploader.js}"></script>
<script th:src="@{admin/plugins/uploader/js/jax.uploader.js}"></script>
<script th:src="@{admin/plugins/uploader/js/uploadCall.js}"></script>
<div class="content-header" xmlns:th="http://www.w3.org/1999/xhtml">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">轮播图管理</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a th:href="@{admin}">首页</a></li>
                    <li class="breadcrumb-item active">轮播图管理</li>
                    <li class="breadcrumb-item active">上传轮播图</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
    <div>
            <div>
                <div>
                    <div >
                        <form id="userForm">
                            <input type="hidden" name="id" th:value="${round?.id}">
                            <div class="form-group row">
                                <label for="picDesc" class="col-sm-2 col-form-label">轮播图描述</label>
                                <div class="col-sm-10">
                                    <input type="text" th:value="${round?.picDesc}"
                                           name="picDesc" class="form-control" id="picDesc"
                                           placeholder="填写轮播图描述" required>
                                    <div class="invalid-feedback">请填写轮播图描述</div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="picPath">上传轮播图</label>
                                <div class="input-group col-sm-10">
                                    <input type="text" class="form-control" name="picPath" id="picPath"
                                           th:value="${round?.picPath}"
                                           placeholder="轮播图地址">
                                    <div id="upload-img-btn" class="btn btn-default input-group-btn" style="min-width: 50px">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                    </div>
                                </div>
                            </div>
                            <div id="upload-cover-content" class="form-group col-md-8 hidden" style="margin: 0 auto">
                                <div class="upload-item upload-align">
                                    <p class="upload-title">轮播图</p>
                                    <div th:if="${round.picPath}!=null">
                                        <img th:src="${round.picPath}" title="原上传图片">
                                    </div>
                                    <p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>
                                    <p class="upload-btns">
                                        <a type="button" class="btn btn-sm btn-block btn-info coverUploader">上传</a>
                                    </p>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="clickPath" class="col-sm-2 col-form-label">轮播图跳转链接</label>
                                <div class="col-sm-10">
                                    <input type="text" th:value="${round?.clickPath}" name="clickPath" class="form-control"
                                           id="clickPath"
                                           placeholder="请填写轮播图跳转链接" required>
                                    <div class="invalid-feedback">请填写轮播图跳转链接</div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label  class="col-sm-2 col-form-label">是否展示</label>
                                <div class="col-sm-10">
                                    <div class="icheck-primary icheck-inline">
                                        <input type="radio" id="artile_source_original" name="isShow" value="1"
                                               th:field="*{round.isShow}"/>
                                        <label for="artile_source_original">展示</label>
                                    </div>
                                    <div class="icheck-primary icheck-inline">
                                        <input type="radio" id="artile_source_reprint" name="isShow" value="0"
                                               th:field="*{round.isShow}"/>
                                        <label for="artile_source_reprint">隐藏</label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveOrUpdateBtn">保存</button>
                    </div>
                </div>
            </div>
    </div>
</section>
<style>
    label{
        text-align: right;
    }
    .upload-align{
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0;

        align-content: center;
    }

    .hidden {
        display: none;
    }

</style>

<script>

    function refreshTable() {
        Core.refreshTable("#table")
    }

    $(function () {
        /*上传图片*/
        $("#upload-img-btn").click(function () {
            $('#upload-cover-content').toggle()
            $(".coverUploader").upload({
                server: '[[@{/attachment/upload}]]',
                swf: '/admin/img/Uploader.swf',
                imgAccept: true
            }, function (url, picker) {
                $("#picPath").val(url);
                echoGtUploadResMethd(url, picker);
            });
        })

    })

    // 保存或更新
    $('#saveOrUpdateBtn').on('click', function () {
        var $f = $('#userForm');
        var valid = $f[0].checkValidity();
        var url = $f.find("input[name='id']").val() ? "/round/update" : "/round/save"
        if (valid) {
            Core.mask("#saveOrUpdateBtn");
            Core.postAjax(url, $f.serialize(), function (data) {
                Core.unmask("#saveOrUpdateBtn");
                if (data.status === 200) {
                    $("#formModal").modal("hide");
                    refreshTable();
                }
                layer.msg(data.msg);
            }, function () {
                Core.unmask("#saveOrUpdateBtn");
            })
        }
        $f.addClass("was-validated")
    })
</script>
